<template>
  <div
    class="echarts_box"
    ref="chart"
  ></div>
</template>
<script>
import { set } from 'vue/types/umd';

export default {
  name: "normalMap",
  props: {
    option: Object,
    data: Array,
  },
   data(){
    return{
      mapAreaCode:330000,
      mapDatas:[],
      defaultColors:["#286AF7","#00BAE9","#3BD242","#DFDF01","#FD9802","#F9691A","#F14E4E","#AE0CE3","#6E11EC","#4911EC"]
    }
  },
  computed: {
    colors(){
      return this.option.colors;
    }
  },
  methods: {
    init(){
      this.mapDatas = JSON.parse(JSON.stringify(this.data));
        this.initChart();
    },
    initChart() {
       var colorDatas = {
            main_axzs: [
                { "label": "90以上", color: "#cd7b11", "gte": 90, },//绿
                { "label": "80~90", "color": "#218331", "gt": 80, "lt": 90 },//黄
                { "label": "80以下", "color": "#a3383c", "lte": 80 }//红
            ],
            main_wrcal: [
                { "label": "15以上", color: "#cd7b11", "gte": 15, },//绿
                { "label": "5~15", "color": "#218331", "gt": 5, "lt": 15 },//黄
                { "label": "5以下", "color": "#a3383c", "lte": 5 }//红
            ],
            main_tjcgl: [
                { "label": "90以上", color: "#cd7b11", "gte": 90, },//绿
                { "label": "80~90", "color": "#218331", "gt": 80, "lt": 90 },//黄
                { "label": "80以下", "color": "#a3383c", "lte": 80 },//红
            ],
            main_gzjg: [
                { "label": "90以上", color: "#cd7b11", "gte": 90, },//绿
                { "label": "80~90", "color": "#218331", "gt": 80, "lt": 90 },//黄
                { "label": "80以下", "color": "#a3383c", "lte": 80 }//红
            ],
            jax_gzjg: [
                { "label": "95以上", color: "#cd7b11", "gte": 95, },//绿
                { "label": "80~95", "color": "#218331", "gt": 80, "lt": 95 },//黄
                { "label": "80以下", "color": "#a3383c", "lte": 80 }//红
            ],
            lhyg_tjl: [
                { "label": "90以上", color: "#cd7b11", "gte": 90, },//绿
                { "label": "80~90", "color": "#218331", "gt": 80, "lt": 90 },//黄
                { "label": "80以下", "color": "#a3383c", "lte": 80 }//红
            ],
            lwqy_tjcgl: [
                { "label": "90以上", color: "#cd7b11", "gte": 90, },//绿
                { "label": "80~90", "color": "#218331", "gt": 80, "lt": 90 },//黄
                { "label": "80以下", "color": "#a3383c", "lte": 80 }//红
            ],
        }
        var fwDatas =[
                { "label": "90以上", color: "#cd7b11", "gte": 90, },//绿
                { "label": "80~90", "color": "#218331", "gt": 80, "lt": 90 },//黄
                { "label": "80以下", "color": "#a3383c", "lte": 80 }//红
            ]
        var datas = [];
        var dqDatas = [];
        $.each(originalDatas, function (i, item) {
            datas.push({
                name: item.ctname,
                value: [item.lng, item.lat, item['value']],
                lng: item.lng,
                lat: item.lat,
                data: item['value'],
                aab301: item.aab301
            });
            dqDatas.push({
                name: item.ctname,
                value: item['value'],
                aab301: item.aab301
            })
        });
      const chart = this.$refs.chart;
      var myMap = echarts.init(chart);
       $.get("./json/baiduMap/"+this.mapAreaCode+".json", function (data) {
            echarts.registerMap("zjMap", data);
       var option = {
                visualMap:fwDatas?{
                    // min: 0,
                    // max: 100,
                    left: 26,
                    seriesIndex: 0,
                    bottom: 10,
                    showLabel: true,
                    hoverLink: false,
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    },
                     pieces:fwDatas,
                    show: true
                }:"",
                geo: {
                    map: "zjMap",
                    roam: false,
                    seriesIndex: 0,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    top: 91,
                    zoom:mapAreaCode=="330000"? 1.1:1,
                    label: { //图形上的文本标签
                        normal: {
                            formatter: function (text) {
                            console.log(text,"text")
                            var data_=dqDatas[dqDatas.map(item =>item.name).indexOf(text.name)]
                             return '{value|' + data_.value + '}\n{name|' + data_.name + '}'
                            },
                            rich: {
                                name: {
                                    color: '#fff',
                                    fontSize: $$.fitFontSize(18),
                                    fontWeight: 'bold',
                                },
                                value: {
                                    color: '#fff',
                                    fontSize: $$.fitFontSize(20),
                                    fontWeight: 'bold',
                                }
                            },
                            textStyle: {
                                color: '#FFF',
                                fontSize: 20,
                            },
                            position: 'inside',
                            show: true
                        },
                        emphasis: {
                            color: '#FDA111'
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#227ac7',
                            borderColor: '#fff',
                            borderWidth: 1,
                            color:"#fff"
                        },
                        emphasis: {
                            areaColor: '#4b9bff',
                        }
                    },
                    
                },
                series: [
                    {
                    type: 'map',
                    map: 'zjMap',
                    id: 'zjMap',
                    zoom: 1.1,
                    geoIndex: 0,
                    data: dqDatas,
                },
                {
                    name: '地区点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    hoverAnimation: true,
                    symbolSize:80,
                    itemStyle: {
                        normal: {
                             color: 'transparent',
                        }
                    },
                    label: { //图形上的文本标签
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                            color: '#FDA111'
                        }
                    },
                    data: datas
                }
                ]
            };
           myMap.setOption(option)
          })
    },
  
  
    getColor(colors, i, isFirst, orient) {
      let color = colors && colors[i];
      if (color && (typeof color == 'object')) {
        if (isFirst) {
          return color.color1;
        }
        orient = orient || "horizontal";
        if (orient == "vertical") {
          return new echarts.graphic.LinearGradient(0,0,1,0,
            [
              {
                offset: 0,
                color: color.color1,
              },
              {
                offset: color.postion || 1,
                color: color.color2 || color.color1,
              },
            ],
            false
          );
        }
        return new echarts.graphic.LinearGradient(0,0,0,1,
          [
            {
              offset: 0,
              color: color.color1,
            },
            {
              offset: color.postion || 1,
              color: color.color2 || color.color1,
            },
          ],
          false
        );
      } else if(!color && (this.colors && this.colors[i])){
        return this.colors[i];
      } else {
        return this.defaultColors[i];
      }
    },
     hasProp(obj, field, defaultValue) {
      if (obj.hasOwnProperty(field)) {
        return obj[field];
      } else {
        return defaultValue;
      }
    },
  },
  mounted() {
    this.init();
  },
  watch: {
    option: {
      handler(val, oldval) {
        if(val && JSON.stringify(val) != '{}') this.init();
      },
      deep: true,
    },
     data: {
      handler(val, oldval) {
        if(val) this.init();
      },
      deep: true,
    },
  },
 
};
</script>
<style scoped>
.echarts_box {
  width: 100%;
  height:100%;
}
</style>